<template>
  <div>
    <div class="AuthenticationBox">
      <input
        type="file"
        style="display: none"
        ref="input"
        accept="image/*"
        @change="handleChange"
      />
      <input
        type="file"
        style="display: none"
        ref="input1"
        accept="image/*"
        @change="handleChange1"
      />
      <van-nav-bar title="实名验证" left-arrow @click-left="onClickLeft">
        <template #left>
          <van-icon name="arrow-left" style="color: #000; font-size: 24px" />
        </template>
      </van-nav-bar>
      <div class="Authentication_container">
        <div class="Authentication_box">
          <img :src="dataSrc || IdCardFront" alt="银行卡正面" class="backgroundUrl" />
          <div>
            <div class="myIconCameras">
              <img :src="myIconCamera" alt="" @click="$refs.input?.click()" />
              <div>点击拍摄/上传人像面</div>
            </div>
          </div>
        </div>
        <div class="Authentication_box2">
          <img :src="dataSrc1 || IdCardBack" alt="银行卡正面" class="backgroundUrl2" />
          <div>
            <div class="myIconCameras2">
              <img :src="myIconCamera" alt="" @click="$refs.input1?.click()" />
              <div>点击拍摄/上传人像面</div>
            </div>
          </div>
        </div>
        <button class="next" @click="goto">下一步</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, useId } from 'vue'
import IdCardFront from '../../assets/images/icon/common resource/hdpi/id_card_front.png'
import IdCardBack from '../../assets/images/icon/common resource/hdpi/id_card_back.png'
import myIconCamera from '../../assets/images/icon/common resource/hdpi/my_icon_camera_n.png'
import { useRouter } from 'vue-router'
import { bindUserIdCard } from '../../api/search'
import JSEncrypt from 'jsencrypt'
const dataSrc = ref('')
const dataSrc1 = ref('')
const userId = ref(parseInt(localStorage.getItem('userId') as string))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))
// 返回上一页的处理
const onClickLeft = () => {
  history.back()
}
const router = useRouter()
const handleChange = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    const file = target.files[0] // 获取选择的文件
    dataSrc.value = URL.createObjectURL(file) // 创建一个 URL 用于预览
    localStorage.setItem('dataSrc', dataSrc.value)
  }
}
const handleChange1 = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    const file = target.files[0] // 获取选择的文件
    dataSrc1.value = URL.createObjectURL(file) // 创建一个 URL 用于预览
    localStorage.setItem('dataSrc', dataSrc.value)
  }
}
const crypt = new JSEncrypt()
const publicKey =
  'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB'
crypt.setPublicKey(publicKey)
const goto = () => {
  const bindUserIdCard1 = async () => {
    const res = await bindUserIdCard(userId.value, sessionId.value, {
      userId: userId.value,
      name: crypt.encrypt('张寒路') ||"",
      sex: crypt.encrypt('不详')||"",
      nation: crypt.encrypt('汗')||"",
      birthday: crypt.encrypt('13月32日')||"",
      address: crypt.encrypt('尼玛县尼玛乡尼玛镇')||"",
      idNumber: crypt.encrypt('110110110110110110')||"",
      issueOffice: crypt.encrypt('尼玛县政府')||""
    })
    console.log(res)
    router.push('/checkauthentication')
  }
  bindUserIdCard1()
}
</script>

<style>
@import './authentication.scss';
</style>